<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            :ellipsis="false"
            mode="horizontal"
            default-active="2"
        >
          <el-menu-item index="1">{{ userInfoStore.info.nickname }}</el-menu-item>
          <el-sub-menu index="2">
            <template #title>
              <img :src="userInfoStore.info.userPic? userInfoStore.info.userPic:avatar" style="width: 40px;height: 40px;border-radius: 50%">
            </template>
            <el-menu-item index="2-1">设置主题</el-menu-item>
            <el-menu-item index="2-2">item two</el-menu-item>
            <el-menu-item index="2-3">item three</el-menu-item>
            <el-menu-item index="2-4">item four</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="3">作品中心</el-menu-item>
          <el-menu-item index="4">创作</el-menu-item>
        </el-menu>
        <div class="h-6" />
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import useUserInfoStore from '@/stores/userinfo.js'
const userInfoStore = useUserInfoStore();
const activeIndex = ref('1')
const avatar = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')


</script>

<style>
.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
}

</style>
